<template>
    <div class="article-type">
        <div class="article-type-card">
            <div class="article-type-height">
                <router-link :to="{name:'article-type-edit-nocache'}">
                    <Button class="article-type-rightBtn" type="primary" size="large"><Icon type="plus-round"></Icon>新增文章分类</Button>
                </router-link>
            </div>
            <i-table height="730" stripe :columns="columns" :data="data"></i-table>
        </div>
        <Modal v-model="modal2" width="360">
            <p slot="header" style="color:#f60;text-align:center">
                <Icon type="information-circled"></Icon>
                <span>删除确认</span>
            </p>
            <div style="text-align:center">
                <p>删除后无法恢复</p>
                <p>是否继续删除？</p>
            </div>
            <div slot="footer">
                <Button type="error" size="large" long :loading="modal_loading" @click="del">删除</Button>
            </div>
        </Modal>
    </div>
</template>
<script>
    export default {
        name:"article-type",
        data(){
            return{
                columns:[
                    {
                        title: '序号',
                        type: 'index',
                        align:"center",
                    },
                    {
                        title: '分类',
                        key: 'catname',
                        align:"center",
                    },
                    {
                        title: '是否显示',
                        key: 'isshow',
                        align:"center",
                        render:(h,params)=>{
                            return h("div",
                                [
                                    h("Icon",{
                                        props:{type: params.row.isshow==1?'eye':'eye-disabled'}
                                    }),
                                    h("span",params.row.isshow==1?' 显示':' 隐藏')
                                ]
                            )
                        }
                    },
                    {
                        title: '操作',
                        key: 'action',
                        align: 'center',
                        render: (h, params) => {
                            return h('ButtonGroup', [
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                    },
                                    on: {
                                        click: () => {
                                            this.tiao(params.index)
                                        }
                                    }
                                },"修改"),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(params.index)
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    },
                ],
                data:[],
                modal2:false,
                doIndex:0,//操作的下标
                modal_loading:false,
            }
        },
        activated(){
            this.getArticleTypeList()
        },
        methods:{
            getArticleTypeList(){
                this.getJsonData("Articletype/getArticleType",{})
                    .then((res)=>{
                        this.data=res.data
                    })
            },
            remove(n){
                this.doIndex=n
                this.modal2=true
            },
            del(){
                this.modal_loading = true;
                this.getJsonData("Articletype/deleteArticleType",{catId:this.data[this.doIndex].catid},true)
                    .then((res)=>{
                        this.getArticleTypeList()
                        this.modal_loading = false;
                        this.modal2 = false;
                        this.$Message.success('删除成功');
                    }).catch((res)=>{
                    this.modal_loading = false;
                    this.modal2 = false;
                })
            },
            tiao(n){
                this.$router.push({name:"article-type-edit-nocache",query:{isEdit:true,id:this.data[n].catid}})
            },
            timeFormat(n){
                var date = new Date(n*1000);
                var year = date.getFullYear();
                var month = (date.getMonth() + 1)<10?'0'+(date.getMonth() + 1):(date.getMonth() + 1);
                var day = date.getDate()<10?'0'+date.getDate():date.getDate();
                var hours = date.getHours()<10?'0'+date.getHours():date.getHours();
                var minute = date.getMinutes()<10?'0'+date.getMinutes():date.getMinutes();
                var second = date.getSeconds()<10?'0'+date.getSeconds():date.getSeconds();
                return year+'-'+month+'-'+day+' '+hours+':'+minute+":"+second
            }
        }
    }
</script>
<style lang="less">
    @import "./article-type";
</style>